<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const loginForm = reactive({
  username: '',
  password: '',
  remember: false,
  role: 'owner' // 'owner' or 'admin'
})

const loading = ref(false)

const handleLogin = () => {
  loading.value = true
  
  // 模拟登录请求
  setTimeout(() => {
    loading.value = false
    // 登录成功后根据角色跳转到相应的首页
    router.push('/')
  }, 1000)
}
</script>

<template>
  <div class="min-h-screen flex items-center justify-center bg-background">
    <div class="max-w-md w-full space-y-8 p-8 bg-white rounded-lg shadow-card">
      <div class="text-center">
        <div class="mx-auto w-16 h-16 flex items-center justify-center rounded-full bg-primary">
          <el-icon class="text-white text-3xl"><House /></el-icon>
        </div>
        <h2 class="mt-6 text-3xl font-bold text-text-dark">住宅管理系统</h2>
        <p class="mt-2 text-sm text-text-light">请登录您的账号</p>
      </div>
      
      <el-form @submit.prevent="handleLogin">
        <div class="space-y-4">
          <!-- 用户名 -->
          <el-form-item>
            <el-input 
              v-model="loginForm.username"
              placeholder="请输入用户名" 
              prefix-icon="User"
              size="large"
            />
          </el-form-item>
          
          <!-- 密码 -->
          <el-form-item>
            <el-input 
              v-model="loginForm.password"
              type="password" 
              placeholder="请输入密码" 
              prefix-icon="Lock"
              size="large"
              show-password
            />
          </el-form-item>
          
          <!-- 角色选择 -->
          <el-form-item>
            <el-radio-group v-model="loginForm.role" class="w-full flex">
              <el-radio label="owner" class="flex-1">业主</el-radio>
              <el-radio label="admin" class="flex-1">物业管理员</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <!-- 记住密码和忘记密码 -->
          <div class="flex items-center justify-between">
            <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
            <a href="#" class="text-sm text-primary hover:text-primary-dark">忘记密码？</a>
          </div>
          
          <!-- 登录按钮 -->
          <el-button 
            type="primary" 
            :loading="loading" 
            class="w-full py-3" 
            @click="handleLogin"
            size="large"
          >
            登 录
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
